<template>
  <div class="password-input-container">
    <div class="input-wrapper">
      <el-input 
        v-model="password" 
        :placeholder="placeholder"
        :type="showPassword ? 'text' : 'password'"
        class="custom-input"
      >
        <template #prefix>
          <el-icon><Lock /></el-icon>
        </template>
        <template #suffix>
          <el-icon class="cursor-pointer" @click="togglePasswordVisibility">
            <component :is="showPassword ? 'View' : 'Hide'" />
          </el-icon>
        </template>
      </el-input>
    </div>
    
    <el-button 
      type="primary" 
      class="submit-btn"
      @click="handleSubmit"
    >
      {{ buttonText }}
    </el-button>
    <div class="password-tip">
        <el-popover
          placement="top"
          :width="240"
          trigger="hover"
          popper-class="qrcode-popover"
        >
          <template #reference>
            <div class="tip-text">
              <el-icon class="mr-1"><InfoFilled /></el-icon>
              <span>管理员密码可微信联系 janxland 获取</span>
            </div>
          </template>
          
          <template #default>
            <div class="qrcode-container">
              <img 
                src="https://mybox-1257251314.cos.ap-chengdu.myqcloud.com/upload/myself/wechat.jpg" 
                alt="微信二维码" 
                class="qrcode-image"
              />
            </div>
          </template>
        </el-popover>
      </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Lock, View, Hide, InfoFilled } from '@element-plus/icons-vue';

const props = defineProps({
  placeholder: {
    type: String,
    default: '请输入访问密码'
  },
  buttonText: {
    type: String,
    default: '验证'
  }
});

const emit = defineEmits(['submit']);

const password = ref('');
const showPassword = ref(true);

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

const handleSubmit = () => {
  emit('submit', password.value);
};
</script>

<style>
/* 自定义全局Popover样式 */
.qrcode-popover {
  padding: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
}
</style>

<style scoped>
.password-input-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.input-wrapper {
  width: 100%;
  position: relative;
}

.custom-input {
  transition: all 0.3s ease;
}

.custom-input :deep(.el-input__inner) {
  height: 3rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  background-color: #ffffff;
  padding: 0 1rem;
  text-align: center;
  letter-spacing: 5px;
}

.custom-input :deep(.el-input__inner::placeholder) {
  text-align: center;
  letter-spacing: 5px;
}

.custom-input :deep(.el-input__inner:focus) {
  outline: none;
}

.custom-input :deep(.el-input__prefix) {
  left: 10px;
  display: flex;
  align-items: center;
}

.custom-input :deep(.el-input__suffix) {
  right: 10px;
  display: flex;
  align-items: center;
}

.cursor-pointer {
  cursor: pointer;
}

.password-tip {
  margin-top: 0.75rem;
  text-align: center;
}

.tip-text {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #3b82f6;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.tip-text:hover {
  color: #2563eb;
  background-color: rgba(59, 130, 246, 0.05);
}

.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: .3s;
}

.qrcode-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  transition: transform 0.3s ease;
}

.qrcode-container:hover {
  transform: scale(1.5);
  border: 1px solid #3b82f6;
}

.qrcode-text {
  text-align: center;
}

.qrcode-text p:first-child {
  font-weight: 500;
  color: #1f2937;
}

.submit-btn {
  height: 3rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #3b82f6 0%, #f97316 100%);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  letter-spacing: 5px;
}

.submit-btn:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, #2563eb 0%, #ea580c 100%);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .custom-input :deep(.el-input__inner) {
    height: 2.75rem;
    font-size: 0.9rem;
    letter-spacing: 3px;
  }
  
  .custom-input :deep(.el-input__inner::placeholder) {
    letter-spacing: 3px;
  }
  
  .submit-btn {
    height: 2.75rem;
    font-size: 0.9rem;
    letter-spacing: 3px;
  }
  
  .tip-text {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .custom-input :deep(.el-input__inner) {
    height: 2.5rem;
    font-size: 0.85rem;
    letter-spacing: 2px;
    padding: 0 0.75rem;
  }
  
  .custom-input :deep(.el-input__inner::placeholder) {
    letter-spacing: 2px;
  }
  
  .submit-btn {
    height: 2.5rem;
    font-size: 0.85rem;
    letter-spacing: 2px;
  }
  
  .password-tip {
    margin-top: 0.5rem;
  }
}
</style> 